<div class="layui-fluid layui-anim febs-anim" id="statistics-excel" lay-title="统计导出">
    <div class="febs-container layui-card">
        <div class="layui-card-body">
            <div id="query-project-form">
                <form method="post" class="layui-form" lay-filter="export-detail-table-form" id="export-detail-table-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">年份</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="year" id="date-select">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">月份</label>
                        <div class="layui-input-block">
                            <div id="month-select"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目名称</label>
                        <div class="layui-input-block">
                            <div id="project-select"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目类型</label>
                        <div class="layui-input-block">
                            <div id="type-select"></div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">模板类型</label>
                        <div class="layui-input-block">
                            <div id="excel-type-select"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="exportData">
                                数据导出
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['laydate', 'jquery', 'laydate', 'febs', 'form', 'eleTree', 'table', 'validate', 'xmSelect', 'layer', 'upload'], function () {
        let $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            xmSelect = layui.xmSelect,
            companyXmSelect,
            $view = $('#statistics-excel'),
            $exportData = $view.find('#exportData'),
            $exportDetailTableForm = $view.find('#export-detail-table-form'),
            $dateSelect = $view.find('#date-select'),
            $layer = layui.layer,
            upload = layui.upload,
            monthList = [],
            monthXmSelect,
            excelTypeSelect,
            typeXmSelect,
            projectList = [],
            typeList = [],
            typeSumList = [],
            projectXmSelect;

        laydate.render({
            elem: '#date-select',
            type: 'year',
            value: new Date().getFullYear()
        });

        form.render();

        getMonthList();

        function getMonthList() {
            for (let i = 1; i <= 12; i++) {
                monthList.push({ name: i + '月', value: i})
            }
        }

        monthXmSelect = xmSelect.render({
            el: '#month-select',
            toolbar: {show: true},
            name: 'month',
            theme: {color: '#52c41a'},
            prop: {
                name: 'name',
                value: 'value'
            },
            height: 450,
            data: monthList
        });

        // 项目名称
        projectXmSelect = xmSelect.render({
            el: '#project-select',
            toolbar: {show: true},
            filterable: true,
            autoRow: true,
            theme: {color: '#0270f8'},
            height: 260,
            name: 'projectId',
            data: [],
            on: function(value) {
                console.log(value)
                getTypeData(value)
                typeXmSelect.update(
                    {data: typeList}
                )
            }
        });

        typeXmSelect = xmSelect.render({
            el: '#type-select',
            toolbar: {show: true},
            filterable: true,
            autoRow: true,
            theme: {color: '#0270f8'},
            height: 260,
            name: 'typeId',
            data: []
        });

        febs.get(ctx + 'project', null, function (result) {
            projectList = result.data;
            // console.log(projectList)
            let data = [];
            // console.log(projectList.length)
            for (let i = 0; i < projectList.length; i++) {
                let e = {};
                e.value = projectList[i].id;
                e.name = projectList[i].projectName;
                // projectList[i].type = i;
                data[i] = e;
            }
            projectXmSelect.update(
                {data: data}
            )
        });

        febs.get(ctx + 'projectType', null, function (result) {
            typeSumList = result.data;
            // console.log(typeSumList)
        });

        function getTypeData(value) {
            typeList = []
            for (let j = 0; j < value.arr.length; j++ ) {
                // console.log(value)
                let f = 0;
                for (let i = 0; i < projectList.length; i++) {
                    let a = {};
                    // console.log(value)
                    if(String(value.arr[j].value) === String(projectList[i].id)) {
                        // a.name = projectList[i].projectType;
                        a.value = projectList[i].typeId;
                        // console.log(a.value)
                        for(let m = 0; m < typeSumList.length; m++) {
                            // console.log(projectList[i].typeId)
                           // console.log(typeSumList[m].id)
                            if (String(typeSumList[m].id) === String(projectList[i].typeId)) {
                                a.name = typeSumList[m].projectType;
                               // console.log(a.name)
                                break;
                            }
                        }
                        // console.log(typeList.length)
                        for(let k = 0; k<typeList.length; k++) {
                            // console.log(typeList[k])
                            // console.log(a)
                            if(typeList[k].name===a.name)
                                f = 1;
                        }
                        if(f === 0) {
                            typeList.push(a);
                            break;
                        }
                    }
                }
            }
        }

        // 模板类型选项
        febs.get(ctx + 'detailCost/getUserPermission', null ,function (result) {
            let hasPermission = result.data
            let excelTypeList = []
            excelTypeList.push({ name: '含第三方', value: 1 })
            if (hasPermission) {
                excelTypeList.push({ name: '含管理成本', value: 2 })
                excelTypeList.push({ name: '含补助减免', value: 3 })
            }
            excelTypeSelect = xmSelect.render({
                el: '#excel-type-select',
                toolbar: {show: false},
                theme: {color: '#a355ec'},
                radio: true,
                clickClose: true,
                defaultSelected: [1],
                name: 'excelType',
                initValue:[{ name: '含第三方', value: 1 }],
                prop: {
                    name: 'name',
                    value: 'value'
                },
                data: excelTypeList
            });
        })
        // 以下是子表导出
        $exportData.on('click', function () {
            let params = $exportDetailTableForm.serializeJson();
            if (!params.year) {
                febs.alert.error("请选择年份");
                return;
            }
            if (!params.month) {
                febs.alert.error("请选择月份");
                return;
            }
            if (!params.projectId) {
                febs.alert.error("请选择项目");
                return;
            }
            if (!params.excelType) {
                febs.alert.error("请选择模板类型");
                return;
            }
            febs.download(ctx + 'dataExport/dataExport', params, params.year + '项目统计表.xlsx');
        });
    });
</script>